<template>
    <!-- component/padinput/index.wxml -->
    <view class="page">
        <view class="content">
            <block v-for="(item, index) in Length" :key="index">
                <input
                    :class="'iptbox ' + (index == 0 ? 'b-l' : '')"
                    :value="ValueClone.length >= index + 1 ? ValueClone[index] : ''"
                    disabled
                    :password="ispassword"
                    @tap.stop.prevent="Tap"
                />
            </block>
        </view>
        <input name="password" :password="true" class="ipt" :maxlength="Length" :focus="isFocusClone" @input="Focus" :value="ValueClone" type="number" />
    </view>
</template>

<script>
// component/padinput/index.js
export default {
    data() {
        return {
            Length: 6,

            //输入框个数
            // Value: "", //输入的内容
            //是否密文显示 true为密文， false为明文。
            ispassword: true,

            ValueClone: '',
            isFocusClone: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        bool: {
            // 定义是否清空
            type: Boolean,
            default: false
        },
        Value: {
            // 定义是否清空
            type: String,
            default: ''
        },
        isFocus: {
            type: Boolean,
            default: false //聚焦
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        Focus(e) {
            let that = this;
            let inputValue = {
                inputValue: e.detail.value
            }; // 传递给父元素

            that.$emit('infotan', {
                detail: inputValue
            });
            that.setData({
                ValueClone: e.detail.value
            });

            if (e.detail.value.length == 6 && that.bool) {
                setTimeout(() => {
                    that.setData({
                        ValueClone: ''
                    });
                }, 500);
            }
        },

        Tap() {
            let that = this;
            that.setData({
                isFocusClone: true
            });
        }
    },
    watch: {
        Value: {
            handler: function (newVal, oldVal) {
                this.ValueClone = newVal;
            },

            immediate: true
        },

        isFocus: {
            handler: function (newVal, oldVal) {
                this.isFocusClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
/* component/padinput/index.wxss */
.page {
    height: 90rpx;
}
.content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.b-l {
    border-left: 1rpx solid #ddd;
}

.iptbox {
    width: 88rpx;
    height: 88rpx;
    border-right: 1rpx solid #ddd;
    border-top: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ipt {
    width: 0;
    height: 0;
}
</style>
